<template>
	<view class="uniPopup">
		<view class="uniPopup-btn" hover-class="active" @click="open('show')">
			打开
		</view>
		<view class="uniPopup-btn" hover-class="active" @click="open1(10)">
			打开新弹出
		</view>
		<view class="uniPopup-btn" hover-class="active" @click="open1(11)"> 打开新弹出带时间 </view>
		<!-- type="center" 切换top bottom -->
		<uni-popup ref="show" type="center" :mask-click="true" @change="change">
			<scroll-view scroll-y="true" style="height: 300rpx;" @click="closeRef('show')">
				<view class="popup">
					<view class="popup-list">
						<view class="popup-list-item" 
							v-for="(item,i) in list"
							:key="i"
							@click.stop="close('show')"
							>
							{{item.name}}
						 </view>
					</view>
				</view>
			</scroll-view>
		</uni-popup>
		<JkshowModal ref="JkshowModal" @JkPopupChange="JkPopupChanges"></JkshowModal>
	</view>
</template>

<script>
	import JkshowModal from "../../../components/JkshowModal/index.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'  // 弹出窗
	export default{
		components:{
			uniPopup,
			JkshowModal
		},
		data(){
			return{
				list:[{name:'我的名字'},{name:'我的名字'}]
					
					
			}
		},
		methods:{
			JkPopupChanges(ev){
				let {type,iscountDown} = ev
				if(type==1){
					console.log('我是弹出的取消')
				}
				if(type==10){
					console.log('我是弹出1的确认')
				}
				if(type==11){
					console.log('我是弹出2的确认',iscountDown?"倒计时结束":'倒计时未结束')
				}
			},
			open1(ev){			
				
				if(ev==10){
					this.$refs.JkshowModal.Jk_showModals({
						content:'我是弹出1',
						Goconfirm:ev
					})
				}
				if(ev==11){
					this.$refs.JkshowModal.Jk_showModals({
						content:['我是弹出',{txt:2,class:'t2'},{txt:'倒计时',style:'	font-size: 42rpx;color: #0066CC;'}],
						countDown:10,
						Goconfirm:ev,
						confirmTxt:'我知道了'
					})
				}			
			},
			open(e){
				this.$refs[e].open()
			},
			close(e){
				console.log("点击了事件")
				// this.$refs[e].close()
			},
			closeRef(e){
				console.log("点击了空白处")
				this.$refs[e].close()
			},
			change(e){// e监听当前弹窗变化
				
			}
		}
	}
</script>

<style>
	page{
		background: #F5F5F5;
		font-size: 30rpx;
	}
	.uniPopup{
		padding: 0 30rpx;
		padding-top: 20rpx;

	}
	.uniPopup-btn{
		background: #333;
		border-radius: 20rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		margin-bottom: 20rpx;
			
	}
	.active{
		background: #999999;
	}
	.popup{
		width: 600rpx;
		margin: auto;
		height: 100%;
		border-radius: 10rpx;
		background: #FFFFFF;
	}
	.popup-list-item{
		text-align: center;
		padding: 6px 0;
	}
</style>
